import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Switch, Route, Link } from 'react-router-dom'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import { Layout, Menu } from 'antd'
import { Provider, useDispatch, useSelector } from 'react-redux'

import 'normalize.css'
import 'antd/dist/antd.css'
import './style.scss'
import style from './style.module.scss'

import HomeManagement from './container/home-management'
import store from './store'
import BasicSetting from './container/basic-setting'
import { getChangeSchemaAction } from './container/home-management/store/action'
import axios from 'axios'
import { parseJsonByString } from '../common/utils'
import Login from './container/login'

const { Header, Sider, Content } = Layout

const useCollapsed = () => {
  const [collapsed, setCollapsed] = useState(false)
  const toggleCollapsed = () => {
    setCollapsed(!collapsed)
  }

  return {
    collapsed,
    toggleCollapsed
  }
}

const useStore = () => {
  const dispatch = useDispatch()
  const schema = useSelector((state) => state.homeManagement.schema)

  const changeSchema = (schema) => {
    dispatch(getChangeSchemaAction(schema))
  }

  return {
    schema,
    changeSchema
  }
}

const Wrapper = () => {
  const handleHomePageRedirect = () => {
    window.location.href = '/'
  }
  const { collapsed, toggleCollapsed } = useCollapsed()
  const { changeSchema } = useStore()

  const token = window.localStorage.token

  useEffect(async () => {
    const res = await axios.get('/api/schema/getLatestOne')
    const data = res.data?.data
    data && changeSchema(parseJsonByString(data.schema, {}))
  }, [])

  return token ? (
    <Router>
      <Layout>
        <Sider
          className={style.sider}
          trigger={null}
          collapsible
          collapsed={collapsed}
        >
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['admin-home']}>
            <Menu.Item key="admin-home">
              <Link to="/">
                <span className="iconfont">&#xe626;</span> 首页内容管理
              </Link>
            </Menu.Item>
            <Menu.Item key="admin-setting">
              <Link to="/setting">
                <span className="iconfont">&#xe626;</span> 基础内容管理
              </Link>
            </Menu.Item>
            <Menu.Item key="admin-back" onClick={handleHomePageRedirect}>
              <span className="iconfont">&#xe666;</span> 返回用户页面
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header className={style.header}>
            {collapsed ? (
              <MenuUnfoldOutlined
                className={style.trigger}
                onClick={toggleCollapsed}
              />
            ) : (
              <MenuFoldOutlined
                className={style.trigger}
                onClick={toggleCollapsed}
              />
            )}
          </Header>
          <Content className={style.content}>
            <Switch>
              <Route exact path="/" component={HomeManagement} />
              <Route exact path="/setting" component={BasicSetting} />
            </Switch>
          </Content>
        </Layout>
      </Layout>
    </Router>
  ) : (
    <Login />
  )
}

ReactDOM.render(
  // <React.StrictMode>
  //     <HomeManagement />
  // </React.StrictMode>,
  <Provider store={store}>
    <Wrapper />
  </Provider>,
  document.getElementById('root')
)
